<template>
  <div class="channerl-wrapper">
    <div class="channel-headers">
      <div class="channel-item" :class="{active: channelIndex == i}" v-for="(item, i) in publishList" :key="i" @click="handleChannelSelect(i)">
        <div class="channel-item-info">
          <div class="name">{{ item?.name }}</div>
          <div class="description">{{ item.remark }}</div>
        </div>
        <div class="radio-btn"></div>
      </div>
    </div>
    <div class="channel-tabel">
      <div class="channel-tabel-title">{{ publishList[channelIndex]?.name }}</div>
      <TemplateTable ref="tableRef" :data="publishDetail" :columns="tableColumns" :loading="loading"
        border="none" size="small" stripe :showPagination="false" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { listPublish, detailPublish } from '@/api/modules/agent';

const CHANNEL_LIST = [
  {
    name: '免登录窗口',
    description: '分享链接给其他用户，无需登录即可直接进行使用',
  },
  {
    name: 'API访问',
    description: '通过 API 接入到已有系统中，或企微、飞书等',
  },
  {
    name: '飞书机器人',
    description: '通过 API 直接接入飞书机器人',
  },
  {
    name: '钉钉机器人',
    description: '通过 API 直接接入钉钉机器人',
  },{
    name: '微信公众号接入',
    description: '通过 API 直接接入微信公众号',
  }
]

const channelIndex = ref(0);

function handleChannelSelect(i) {
  if (channelIndex.value != i) {
    channelIndex.value = i
    getPulishDetail();
  }
}

const pageIndex = ref(1)
const pageSize = 20
const total = ref(0)
// 表单元素对象
const tableRef = ref(null)
const loading = ref(false)
// 列表数据
const tableData = ref([])
const tableColumns = computed(() => [
  {
    title: '名称',
    minWidth: 200,
    formatter: ({ row }) => {
      return row.name
    }
  },
  {
    title: '过期时间',
    minWidth: 200,
    formatter: ({ row }) => {
      return row.expirtime
    }
  },
  {
    title: '返回引用',
    minWidth: 200,
    formatter: ({ row }) => {
      return row.returnquote
    }
  },
  {
    title: 'IP 限流（人/分钟）',
    minWidth: 200,
    formatter: ({ row }) => {
      return row.iplimiting
    }
  },
  {
    title: '最后使用时间',
    minWidth: 200,
    formatter: ({ row }) => {
      return row.lasttime
    }
  },
  {
    title: '',
    type: 'action',
    width: 80,
    align: 'center',
    fixed: 'right',
    actions: [
      {
        text: '开始使用',
      }
    ]
  }
])
const publishDetail = ref([]);
const publishList = ref([]);
const getPublishList = async () => {
  const { data } = await listPublish();
  publishList.value = data;
  getPulishDetail();
};
getPublishList()

const getPulishDetail = async() => {
  const id = publishList.value[channelIndex.value].id
  const { data } = await detailPublish({id });
  publishDetail.value = data;
  console.log(publishDetail.value)
}

// 处理页码变化
const handlePageChange = page => {
  pageIndex.value = page
  getPulishDetail()
}

</script>
<style lang="scss">
.channel-tabel {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  &-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
  }
}
.channel-headers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  padding-right: 0;
  padding-bottom: 0;
  margin-bottom: 20px;
  width: 100%;
  .channel-item {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    flex-basis: calc(33% - 20px);
    padding: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid;
    border-color: rgb(232, 235, 240);
    background-color: rgb(251, 251, 252);
    transition: all .2s ease-in-out;
    cursor: pointer;
    &:hover {
      border-color: #5e8fff;
    }
    &.active {
      border-color: #5e8fff;
      background-color: #E1EAFF;
    }
  }
  .radio-btn {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgb(226, 232, 240);
  }
  .active .radio-btn{
    border-color: #5e8fff;
    box-shadow: rgba(51, 112, 255, 0.15) 0px 0px 0px 2.4px;
    &::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #5e8fff;
    }
  }
  .channel-item-info {
    flex: 1;
    margin-right: 10px;
    .name {
      font-size: 14px;
      font-weight: 600;
    }
    .description {
      font-size: 12px;
      color: #666;
    }
  }
}
</style>